@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:900,400,600,300,500,700|Inter:400|Prata:400");
/* The following line is used to measure usage of this code. You can remove it if you want. */
@import url("https://px.animaapp.com/6559b638ec0d332ecbfb02cb.6559b63aec0d332ecbfb02ce.OoCKqpZ.hcp.png");

@font-face {
  font-family: "Telegraf-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Telegraf-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard-SemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Pretendard-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard-ExtraBold";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/Pretendard-ExtraBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Pretendard-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Pretendard-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard-Black";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/Pretendard-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Pretendard-Light";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Pretendard-Light.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard-ExtraLight";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/Pretendard-ExtraLight.otf") format("opentype");
}
@font-face {
  font-family: "SUITE-ExtraBold";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/SUITE-ExtraBold.woff2");
}
@font-face {
  font-family: "SUITE-Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/SUITE-Bold.woff2");
}
@font-face {
  font-family: "SUITE-SemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/NanumSquare_acEB.ttf") format("truetype");
}
@font-face {
  font-family: "SUITE-Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/SUITE-Medium.woff2");
}
@font-face {
  font-family: "SUITE-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SUITE-Regular.otf") format("opentype");
}
@font-face {
  font-family: "SUITE-Heavy";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SUITE-Heavy.ttf") format("truetype");
}
@font-face {
  font-family: "Galmuri11-Regular";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Galmuri11.ttf") format("truetype");
}


.screen a {
  display: contents;
  text-decoration: none;
}

.container-center-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

.container-center-horizontal > * {
  flex-shrink: 0;
  pointer-events: auto;
}

.align-self-flex-start {
  align-self: flex-start;
}

.align-self-flex-center {
  align-self: flex-center;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

* {
  box-sizing: border-box;
}

.x2-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.x2-1 img {
  object-fit: cover;
}

.group-1171278889 {
  align-items: center;
  cursor: pointer;
  display: flex;
  min-width: 355px;
  transition: all 0.2s ease;
}

.rectangle-3477690 {
  background-color: var(--white);
  height: 10px;
  margin-left: 21px;
  margin-top: 1.0px;
  width: 10px;
}

.ux-ui-designer {
  letter-spacing: -1.14px;
  line-height: normal;
  margin-left: 25px;
  margin-top: 1.0px;
  min-height: 32px;
  min-width: 197px;
  white-space: nowrap;
}

.frame-1171278183 {
  align-items: center;
  align-self: center;
  display: inline-flex;
  gap: 22px;
  position: relative;
}

.project {
  left: 28px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.frame-11712781 {
  background-color: var(--granite-gray-2);
  border-radius: 42px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.featured {
  left: 21px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.frame-1171278182 {
  background-color: var(--white);
  border-radius: 54px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.top {
  letter-spacing: -0.50px;
  line-height: normal;
  min-height: 17px;
  min-width: 26px;
  transform: rotate(90.00deg);
  white-space: nowrap;
}

.vector-3294 {
  align-self: center;
  height: 15px;
  margin-top: 0;
  transform: rotate(90.00deg);
  width: 13px;
}

.jyori-1 {
  text-align: center;
}

.tm-1 {
  min-width: 13px;
  text-align: center;
}

.jyori-ui-ux-all-right-reserved {
  height: 58px;
  left: 49px;
  letter-spacing: -0.98px;
  line-height: normal;
  position: absolute;
  top: 291px;
}

.sangshin-connect {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 271px;
  width: 168px;
}

.exhibitoin-web {
  cursor: pointer;
  left: 697px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 211px;
  width: 177px;
}

.img_9293 {
  height: 133px;
  left: 47px;
  position: absolute;
  top: 56px;
  width: 133px;
}

.jyori-2 {
  height: 47px;
  letter-spacing: -0.98px;
  line-height: normal;
  min-width: 77px;
}

.group-1171278882 {
  height: 31px;
  left: 6px;
  position: absolute;
  top: 412px;
  width: 100px;
}

.rectangle-3480355 {
  background-color: var(--woodsmoke-2);
  height: 453px;
  left: 0;
  position: absolute;
  top: 14px;
  width: 764px;
}

.ux-design {
  letter-spacing: 0;
  line-height: normal;
  min-height: 12px;
  min-width: 53px;
  text-align: center;
  white-space: nowrap;
}

.artaloo_-mobile-app-design {
  left: 7px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 413px;
  white-space: nowrap;
}

.exhibition-web-app-uiux-design {
  left: 7px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 412px;
  white-space: nowrap;
}

.x-container {
  height: 522px;
  left: -88px;
  position: relative;
  top: -67px;
  width: 880px;
}

.group-1171278888 {
  cursor: pointer;
  height: 522px;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 880px;
}

.group-1171278887 {
  height: 522px;
  left: 128px;
  position: absolute;
  top: 0;
  width: 624px;
}

.group-1171278886 {
  align-items: flex-start;
  display: flex;
  height: 412px;
  left: 0;
  min-width: 624px;
  position: absolute;
  top: 55px;
}

.rectangle-3480357 {
  background-color: var(--white);
  height: 412px;
  left: 0;
  position: absolute;
  top: 0;
  width: 106px;
}

.rectangle-3480358 {
  background-color: var(--white);
  height: 412px;
  width: 106px;
}

.rectangle-3480359 {
  background-color: var(--white);
  height: 55px;
  left: 0;
  position: absolute;
  top: 0;
  width: 624px;
}

.rectangle-3480360 {
  background-color: var(--white);
  height: 55px;
  left: 0;
  position: absolute;
  top: 467px;
  width: 624px;
}

.rectangle-3480361 {
  background-color: var(--white);
  height: 522px;
  left: 0;
  position: absolute;
  top: 0;
  width: 128px;
}

.rectangle-3480362 {
  background-color: var(--white);
  height: 522px;
  left: 752px;
  position: absolute;
  top: 0;
  width: 128px;
}

.sangshin_-mobile-app-design {
  left: 10px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 410px;
  white-space: nowrap;
}

.brief {
  left: 32px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 13px;
  white-space: nowrap;
}

.frame-1171278700-2 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 54px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 296px;
  transition: all 0.2s ease;
}

.frame-1171278702-1 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 244px;
  overflow: hidden;
  transition: all 0.4s ease;
  width: 369px;
}

.vector-3298 {
  height: 15.71px;
  position: relative;
  width: 18.71px;
}

.x2024-12-04-43849-1 {
  height: 375px;
  margin-left: -254px;
  margin-top: 80px;
  width: 646px;
}

.x2024-12-04-43849-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.x2024-12-04-43849-1 img {
  object-fit: cover;
}

.rectangle-3470089 {
  background-color: var(--onyx);
  height: 73px;
  left: 147px;
  position: absolute;
  top: 11px;
  width: 73px;
}

.rectangle-3470086 {
  background-color: var(--onyx);
  height: 73px;
  left: 11px;
  position: absolute;
  top: 11px;
  width: 58px;
}

.rectangle-3470087 {
  background-color: var(--onyx);
  height: 73px;
  left: 80px;
  position: absolute;
  top: 11px;
  width: 58px;
}

.rectangle-3470088 {
  background-color: var(--onyx);
  height: 73px;
  left: 230px;
  position: absolute;
  top: 11px;
  width: 73px;
}

.group-1000001666 {
  height: 73px;
  left: 148px;
  position: absolute;
  top: 11px;
  width: 73px;
}

.vector-190 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 84px;
  width: 314px;
}

.vector-192 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 314px;
}

.vector-191 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 95px;
  width: 314px;
}

.vector-175 {
  height: 95px;
  left: 11px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-197 {
  height: 95px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-184 {
  height: 95px;
  left: 230px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-186 {
  height: 95px;
  left: 257px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-188 {
  height: 95px;
  left: 283px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-201 {
  height: 95px;
  left: 314px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-179 {
  height: 95px;
  left: 81px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-177 {
  height: 95px;
  left: 49px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-180 {
  height: 95px;
  left: 119px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-176 {
  height: 95px;
  left: 31px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-185 {
  height: 95px;
  left: 249px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-187 {
  height: 95px;
  left: 276px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-189 {
  height: 95px;
  left: 303px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-181 {
  height: 95px;
  left: 100px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-178 {
  height: 95px;
  left: 69px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-182 {
  height: 95px;
  left: 138px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-194 {
  height: 95px;
  left: 148px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-194-1 {
  left: 177px;
}

.vector-194-2 {
  left: 190px;
}

.vector-200 {
  height: 95px;
  left: 221px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-183 {
  height: 95px;
  left: 133px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vector-193 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 11px;
  width: 314px;
}

.vector-195 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 64px;
  width: 314px;
}

.vector-198 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 31px;
  width: 314px;
}

.vector-199 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 41px;
  width: 314px;
}

.vector-199-1 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 53px;
  width: 314px;
}

.vector-196 {
  height: 1px;
  left: 0;
  position: absolute;
  top: 60px;
  width: 314px;
}

.rectangle-3470082 {
  background-color: var(--fuscous-gray);
  border: 0.27px solid;
  border-color: var(--celeste);
  height: 6px;
  left: 0;
  position: absolute;
  top: 0;
  width: 6px;
}

.rectangle-3470084 {
  background-color: var(--fuscous-gray);
  border: 0.27px solid;
  border-color: var(--celeste);
  height: 6px;
  left: 309px;
  position: absolute;
  top: 0;
  width: 6px;
}

.rectangle-3470083 {
  background-color: var(--fuscous-gray);
  border: 0.27px solid;
  border-color: var(--celeste);
  height: 6px;
  left: 0;
  position: absolute;
  top: 90px;
  width: 6px;
}

.rectangle-3470085 {
  background-color: var(--fuscous-gray);
  border: 0.27px solid;
  border-color: var(--celeste);
  height: 6px;
  left: 309px;
  position: absolute;
  top: 90px;
  width: 6px;
}

.group-1171278559 {
  height: 70.66px;
  position: relative;
  width: 43.38px;
}

.rectangle-3469908 {
  background-color: var(--x6wg4ud);
  height: 26px;
  left: 0;
  position: absolute;
  top: 0;
  width: 9px;
}

.rectangle-34 {
  background-color: var(--white);
  height: 20px;
  left: 0;
  position: absolute;
  top: 20px;
  width: 9px;
}

.rectangle-3470056 {
  background-color: var(--white);
  height: 20px;
  left: 4px;
  position: absolute;
  top: 20px;
  width: 9px;
}

.rectangle-3469909 {
  background-color: var(--x6wg4ud);
  height: 41px;
  margin-top: -16.17px;
  transform: rotate(90.00deg);
  width: 9px;
}

.rectangle-3469910 {
  background-color: var(--x6wg4ud);
  height: 26px;
  left: 5px;
  position: absolute;
  top: 0;
  width: 9px;
}

.rectangle-3469907 {
  background-color: var(--white);
  height: 20px;
  left: 5px;
  position: absolute;
  top: 20px;
  width: 9px;
}

.music {
  color: var(--x6wg4ud);
  font-family: var(--font-family-pretendard-medium);
  font-size: 12.3px;
  font-weight: 500;
  left: 1px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 56px;
}

.group-1171278560 {
  height: 68.94px;
  position: relative;
  width: 45px;
}

.rectangle-3469912 {
  background-color: var(--screamin-green-2);
  height: 39px;
  left: 0;
  position: absolute;
  top: 0;
  width: 9px;
}

.rectangle-3469916 {
  background-color: var(--white);
  height: 9px;
  left: 15px;
  position: absolute;
  top: 15px;
  width: 9px;
}

.rectangle-3469914 {
  background-color: var(--screamin-green-2);
  height: 40px;
  left: 15px;
  position: absolute;
  top: -15px;
  transform: rotate(90.00deg);
  width: 9px;
}

.rectangle-3469915 {
  background-color: var(--screamin-green-2);
  height: 40px;
  left: 15px;
  position: absolute;
  top: 14px;
  transform: rotate(90.00deg);
  width: 9px;
}

.rectangle-3469913 {
  background-color: var(--screamin-green-2);
  height: 39px;
  left: 31px;
  position: absolute;
  top: 0;
  width: 9px;
}

.visual {
  color: #5ded6b;
  font-family: var(--font-family-pretendard-medium);
  font-size: 12.3px;
  font-weight: 500;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 54px;
}

.group-1171278561 {
  height: 69.64px;
  position: relative;
  width: 53.21px;
}

.group-5561 {
  align-items: flex-end;
  display: flex;
  height: 39px;
  left: 0;
  min-width: 51px;
  padding: 0 0.0px;
  position: absolute;
  top: 0;
}

.rectangle-3469902 {
  background-color: var(--blueberry);
  height: 32px;
  left: 10px;
  position: absolute;
  top: 8px;
  transform: rotate(-44.35deg);
  width: 9px;
}

.rectangle-3469903 {
  background-color: var(--blueberry);
  height: 32px;
  left: 32px;
  position: absolute;
  top: 8px;
  transform: rotate(-135.65deg);
  width: 9px;
}

.rectangle-3469901 {
  background-color: var(--white);
  height: 51px;
  left: 21px;
  position: absolute;
  top: 9px;
  transform: rotate(90.00deg);
  width: 9px;
}

.rectangle-3469904 {
  background-color: var(--white);
  height: 39px;
  left: 21px;
  position: absolute;
  top: 0;
  width: 9px;
}

.writing {
  color: #bbb5ff;
  font-family: var(--font-family-pretendard-medium);
  font-size: 12.3px;
  font-weight: 500;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 55px;
}

.group-1171278562 {
  height: 69.65px;
  margin-right: -2.00px;
  position: relative;
  width: 74px;
}

.promotion {
  color: var(--white);
  font-family: var(--font-family-pretendard-medium);
  font-size: 12.3px;
  font-weight: 500;
  left: 0;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 55px;
}

.prom-1 {
  height: 125px;
  left: 0;
  position: absolute;
  top: 0;
  width: 334px;
}

.frame-1171278713 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24px;
  cursor: pointer;
  height: 238px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 314px;
  transition: all 0.2s ease;
  width: 887px;
}

.frame-1171278711 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 167px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
}

.frame-1171278714 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24px;
  cursor: pointer;
  display: flex;
  height: 206px;
  left: 0;
  overflow: hidden;
  padding: 0 35px;
  position: absolute;
  top: 631px;
  transition: all 0.2s ease;
  width: 887px;
}

.frame-1171278709-1 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 0;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 399px;
  transition: all 0.2s ease;
}

.frame-1171278712 {
  align-items: center;
  background-color: var(--log-cabin);
  border-radius: 10px;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  left: 180px;
  overflow: hidden;
  padding: 7px 14px;
  position: absolute;
  top: 166px;
}

.bi-bx {
  left: 189px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 388px;
  width: 230px;
}

.frame-1171278722 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 493px;
  left: 1038px;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 270px;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 490px;
}

.name {
  left: 189px;
  letter-spacing: -1.08px;
  line-height: normal;
  position: absolute;
  top: 351px;
  width: 115px;
}

.ceo {
  left: 189px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 388px;
  width: 230px;
}

.frame-1171278721-1 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 493px;
  left: 519px;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 270px;
  transform: translate(0, 25px);
  transition: all 0.6s ease;
  width: 490px;
}

.frame-1171278721-2 {
  align-items: flex-end;
  background-color: var(--white);
  border-radius: 20px;
  display: flex;
  height: 122px;
  left: 6px;
  overflow: hidden;
  position: absolute;
  top: 326px;
  width: 122px;
}

.frame-1171278688-5 {
  height: 390px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translate(0, 25px);
  width: 707px;
}

.vector-194-3 {
  height: 95px;
  position: absolute;
  top: 0;
  width: 1px;
}

.x1-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.x1-1 img {
  object-fit: cover;
}

.a24-22222-1 {
  height: 568px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 756px;
}